# Block: Card Effect

Interactive animation and shadow utility

Utility Block

### BEM Anatomy

This block is intended to be used as an **additional class** on components that require a hover interaction.

| Type      | Class Name        | Description                                                                                                                                          |
| --------- | ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
| ==Block== | `.as-card-effect` | Namespace hook for card-specific interactive behaviors.                                                                                              |
| Modifier  | `--over`          | **Transform:** Scales the element to `1.005`.  <br>**Shadow:** Transitions from 0 to `$box-shadow` using a `:before` pseudo-element for performance. |

### Usage Example

##### HTML Application

Add the class directly to any component wrapper:

```html
<!-- Combined with an Article Item -->
<div class="as-article-item as-card-effect--over">
    ...
</div>

<!-- Used on a standard Bootstrap Card -->
<div class="card as-card-effect--over">
    <div class="card-body">Hover over me</div>
</div>
```
